<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed, reactive } from 'vue'
import PlaneWarGame from '../../components/PlaneWarGame.vue'
import SnakeGame from '../../components/games/SnakeGame.vue'

// 角色类型定义
interface Character {
  id: string
  name: string
  emoji: string
  position: { x: number; y: number }
  direction: number
  state: 'idle' | 'walking' | 'wave' | 'dance' | 'sit'
  isUser?: boolean
}

// 宠物类型定义
interface Pet {
  id: string
  name: string
  emoji: string
  position: { x: number; y: number }
  state: 'idle' | 'following' | 'playing'
}

// 可交互对象类型定义
interface InteractiveObject {
  id: string
  name: string
  emoji: string
  position: { x: number; y: number }
  type: 'door' | 'item' | 'furniture'
  state: 'open' | 'closed' | 'picked' | 'default'
}

// 苹果类型定义
interface Apple extends InteractiveObject {
  eaten: boolean
}

// 天气类型
type WeatherType = 'sunny' | 'rainy' | 'cloudy'

// 活动类型
interface WorldEvent {
  id: string
  name: string
  description: string
  type: 'concert' | 'market' | 'game'
  time: string
}

// 成就类型
interface Achievement {
  id: string
  name: string
  description: string
  badge: string
  unlocked: boolean
}

// 房间类型
interface PrivateRoom {
  id: string
  name: string
  owner: string
  members: string[]
}

// NPC类型
interface NPC {
  id: string
  name: string
  emoji: string
  position: { x: number; y: number }
  type: 'vendor' | 'quest'
}

// 按键状态
interface KeysPressed {
  [key: string]: boolean
  w: boolean
  a: boolean
  s: boolean
  d: boolean
  ArrowUp: boolean
  ArrowLeft: boolean
  ArrowDown: boolean
  ArrowRight: boolean
}

// 视角类型
type Perspective = 'first-person' | 'third-person' | 'god-view'

// 聊天消息类型
interface ChatMessage {
  id: string
  userId: string
  username: string
  message: string
  timestamp: string
}

// 交互区域类型定义
interface InteractiveArea {
  id: string
  name: string
  emoji: string
  position: { x: number; y: number; width: number; height: number }
  type: 'event' | 'shop' | 'portal' | 'activity'
  event?: WorldEvent
}

// 数据状态
const characters = ref<Character[]>([
  {
    id: 'user-1',
    name: '我的角色',
    emoji: '😊',
    position: { x: 400, y: 300 },
    direction: 0,
    state: 'idle',
    isUser: true
  },
  {
    id: 'npc-1',
    name: '艾米',
    emoji: '👩',
    position: { x: 175, y: 75 },
    direction: 0,
    state: 'idle'
  }
])

const pets = ref<Pet[]>([
  {
    id: 'pet-1',
    name: '小黄',
    emoji: '🐶',
    position: { x: 400, y: 320 },
    state: 'following'
  }
])

const interactiveObjects = ref<InteractiveObject[]>([
  {
    id: 'obj-1',
    name: '门',
    emoji: '🚪',
    position: { x: 650, y: 450 },
    type: 'door',
    state: 'closed'
  }
  // 移除了固定的苹果对象，后续会随机生成
])

// 添加苹果数组
const apples = ref<Apple[]>([])

const npcs = ref<NPC[]>([
  {
    id: 'npc-2',
    name: '商人',
    emoji: '🧓',
    position: { x: 600, y: 100 },
    type: 'vendor'
  }
])

// 交互区域数据
const interactiveAreas = ref<InteractiveArea[]>([
  {
    id: 'area-1',
    name: '音乐会舞台',
    emoji: '🎵',
    position: { x: 100, y: 100, width: 150, height: 100 },
    type: 'event',
    event: {
      id: 'event-1',
      name: '音乐会',
      description: '广场音乐会即将开始',
      type: 'concert',
      time: '19:00'
    }
  },
  {
    id: 'area-2',
    name: '跳蚤市场',
    emoji: '🛍️',
    position: { x: 500, y: 150, width: 180, height: 120 },
    type: 'shop'
  },
  {
    id: 'area-3',
    name: '游戏中心',
    emoji: '🎮',
    position: { x: 300, y: 400, width: 150, height: 100 },
    type: 'activity'
  }
])

const currentWeather = ref<WeatherType>('sunny')
const isNightTime = ref(false)
const currentEvent = ref<WorldEvent | null>(null)
const userAchievements = ref<Achievement[]>([
  {
    id: 'ach-1',
    name: '初来乍到',
    description: '第一次进入虚拟世界',
    badge: '👋',
    unlocked: true
  },
  {
    id: 'ach-2',
    name: '苹果爱好者',
    description: '第一次吃苹果',
    badge: '🍎',
    unlocked: false
  }
])
const privateRooms = ref<PrivateRoom[]>([])

// 控制状态
const perspective = ref<Perspective>('third-person')
const followMode = ref(false)
const followTarget = ref<string | null>(null)
const keysPressed = reactive<KeysPressed>({
  w: false,
  a: false,
  s: false,
  d: false,
  ArrowUp: false,
  ArrowLeft: false,
  ArrowDown: false,
  ArrowRight: false
})

// 添加游戏状态
const activeGame = ref<string | null>(null)
const isCharacterMovementEnabled = ref(true)

// NPC对话状态
const activeNPC = ref<NPC | null>(null)
const npcMessages = ref<ChatMessage[]>([])
const newNPCMessage = ref('')

// 移动速度
const moveSpeed = 5

// 音乐会相关状态
const isConcertActive = ref(false)
const concertTracks = ref([
  { id: '1', title: '星空下的旋律', artist: '虚拟乐队', duration: '3:45' },
  { id: '2', title: '数字世界', artist: '电子合成器', duration: '4:20' },
  { id: '3', title: '未来节拍', artist: 'AI音乐家', duration: '3:15' },
  { id: '4', title: '虚拟之恋', artist: '合成器流行', duration: '4:10' }
])
const currentTrack = ref(0)
const isPlaying = ref(false)

// 传送门相关状态
const isPortalActive = ref(false)
const portalDestinations = ref([
  { id: 'city', name: '未来城市', emoji: '🏙️', description: '霓虹闪烁的未来都市' },
  { id: 'forest', name: '魔法森林', emoji: '🌲', description: '充满神秘生物的古老森林' },
  { id: 'beach', name: '阳光海滩', emoji: '🏖️', description: '金色沙滩与碧蓝大海' },
  { id: 'meadow', name: '青青原野', emoji: '🌾', description: '风吹草低见牛羊的辽阔原野' }
])
const currentDestination = ref('')

// 计算属性
const userCharacter = computed(() => {
  return characters.value.find(char => char.isUser)
})

// 方法实现
const togglePerspective = () => {
  const perspectives: Perspective[] = ['first-person', 'third-person', 'god-view']
  const currentIndex = perspectives.indexOf(perspective.value)
  const nextIndex = (currentIndex + 1) % perspectives.length
  perspective.value = perspectives[nextIndex]
  
  // 切换上帝视角时添加/移除特殊控制
  if (perspective.value === 'god-view') {
    document.addEventListener('keydown', handleGodViewControls)
  } else {
    document.removeEventListener('keydown', handleGodViewControls)
  }
}

const toggleDayNight = () => {
  isNightTime.value = !isNightTime.value
}

const toggleFollowMode = () => {
  followMode.value = !followMode.value
  if (followMode.value) {
    // 选择最近的角色作为跟随目标
    const otherCharacters = characters.value.filter(char => !char.isUser)
    if (otherCharacters.length > 0) {
      followTarget.value = otherCharacters[0].id
    }
  } else {
    followTarget.value = null
  }
}

const performAction = (action: 'wave' | 'dance' | 'sit') => {
  if (userCharacter.value) {
    userCharacter.value.state = action
    
    // 3秒后恢复空闲状态
    setTimeout(() => {
      if (userCharacter.value) {
        userCharacter.value.state = 'idle'
      }
    }, 3000)
  }
}

const moveCharacter = () => {
  if (!userCharacter.value || !isCharacterMovementEnabled.value) return
  
  let moved = false
  const newPosition = { ...userCharacter.value.position }
  
  if (keysPressed.w || keysPressed.ArrowUp) {
    newPosition.y -= moveSpeed
    userCharacter.value.direction = 0
    moved = true
  }
  if (keysPressed.a || keysPressed.ArrowLeft) {
    newPosition.x -= moveSpeed
    userCharacter.value.direction = 270
    moved = true
  }
  if (keysPressed.s || keysPressed.ArrowDown) {
    newPosition.y += moveSpeed
    userCharacter.value.direction = 180
    moved = true
  }
  if (keysPressed.d || keysPressed.ArrowRight) {
    newPosition.x += moveSpeed
    userCharacter.value.direction = 90
    moved = true
  }
  
  // 检查边界 - 扩展到整个背景图范围 (从750x550扩展到950x750)
  if (newPosition.x >= 0 && newPosition.x <= 950 && 
      newPosition.y >= 0 && newPosition.y <= 750) {
    userCharacter.value.position = newPosition
    
    // 如果小狗处于跟随状态，让它跟随用户
    const pet = pets.value.find(p => p.id === 'pet-1')
    if (pet && pet.state === 'following') {
      // 计算小狗的位置（稍微落后于用户）
      const distance = Math.sqrt(
        Math.pow(newPosition.x - pet.position.x, 2) + 
        Math.pow(newPosition.y - pet.position.y, 2)
      )
      
      // 如果距离太远，让小狗靠近用户
      if (distance > 30) {
        const angle = Math.atan2(
          newPosition.y - pet.position.y,
          newPosition.x - pet.position.x
        )
        
        pet.position.x = newPosition.x - Math.cos(angle) * 30
        pet.position.y = newPosition.y - Math.sin(angle) * 30
      }
    }
  }
  
  // 更新角色状态
  if (moved) {
    userCharacter.value.state = 'walking'
  } else if (userCharacter.value.state === 'walking') {
    userCharacter.value.state = 'idle'
  }
}

const handleKeyDown = (e: KeyboardEvent) => {
  if (keysPressed.hasOwnProperty(e.key)) {
    keysPressed[e.key as keyof KeysPressed] = true
  }
  
  // 快捷键动作
  switch (e.key) {
    case '1':
      performAction('wave')
      break
    case '2':
      performAction('dance')
      break
    case '3':
      performAction('sit')
      break
    case 'c':
      togglePerspective()
      break
    case 'f':
      toggleFollowMode()
      break
  }
}

const handleKeyUp = (e: KeyboardEvent) => {
  if (keysPressed.hasOwnProperty(e.key)) {
    keysPressed[e.key as keyof KeysPressed] = false
  }
}

const handleGodViewControls = () => {
  // 上帝视角特殊控制
  if (perspective.value === 'god-view') {
    // TODO: 实现上帝视角控制
  }
}

const interactWithObject = (obj: InteractiveObject) => {
  // 切换门状态
  if (obj.type === 'door') {
    obj.state = obj.state === 'open' ? 'closed' : 'open'
    // 当门被交互时，激活传送门界面
    isPortalActive.value = true
  } 
}

// 添加生成苹果的函数
const generateApple = () => {
  // 在场景中随机生成一个苹果
  const newApple: Apple = {
    id: `apple-${Date.now()}`,
    name: '苹果',
    emoji: '🍎',
    position: { 
      x: Math.floor(Math.random() * 700) + 25, 
      y: Math.floor(Math.random() * 500) + 25 
    },
    type: 'item',
    state: 'default',
    eaten: false
  }
  
  apples.value.push(newApple)
  
  // 5秒后自动移除未被捡取的苹果
  setTimeout(() => {
    apples.value = apples.value.filter(apple => apple.id !== newApple.id)
  }, 5000)
}

// 添加吃苹果的函数
const eatApple = (apple: Apple) => {
  if (!apple.eaten) {
    apple.eaten = true
    apple.state = 'picked'
    
    // 从场景中移除苹果
    setTimeout(() => {
      apples.value = apples.value.filter(a => a.id !== apple.id)
    }, 500)
    
    // 解锁成就
    const appleAchievement = userAchievements.value.find(a => a.id === 'ach-2')
    if (appleAchievement && !appleAchievement.unlocked) {
      appleAchievement.unlocked = true
      
      // 添加系统消息通知
      const message: ChatMessage = {
        id: `msg-${Date.now()}`,
        userId: 'system',
        username: '系统',
        message: '成就解锁: 苹果爱好者！',
        timestamp: new Date().toISOString()
      }
      npcMessages.value.push(message)
    }
  }
}

const interactWithPet = (pet: Pet) => {
  // 切换宠物状态
  const states: Pet['state'][] = ['idle', 'following', 'playing']
  const currentIndex = states.indexOf(pet.state)
  const nextIndex = (currentIndex + 1) % states.length
  pet.state = states[nextIndex]
}

const interactWithNPC = (npc: NPC) => {
  // 与NPC交互，设置为当前活跃NPC
  activeNPC.value = npc
  console.log(`与NPC ${npc.name} 交互`)
  // TODO: 实现具体交互逻辑
}

const interactWithArea = (area: InteractiveArea) => {
  // 根据区域类型执行不同操作
  switch (area.type) {
    case 'event':
      if (area.event) {
        currentEvent.value = area.event
        // 显示活动详情
        console.log(`触发活动: ${area.event.name}`)
        // 如果是音乐会，激活音乐会模式
        if (area.event.type === 'concert') {
          isConcertActive.value = true
        }
      }
      break
    case 'shop':
      // 打开商店界面
      console.log('打开商店')
      break
    case 'activity':
      // 开始小游戏或其他活动
      console.log('开始活动')
      // 显示游戏选择界面
      activeGame.value = 'menu'
      break
    case 'portal':
      // 传送到其他区域
      console.log('传送到其他区域')
      isPortalActive.value = true
      break
  }
}

const createPrivateRoom = () => {
  // 创建私人房间
  const newRoom: PrivateRoom = {
    id: `room-${Date.now()}`,
    name: '我的房间',
    owner: 'user-1',
    members: ['user-1']
  }
  privateRooms.value.push(newRoom)
}

const sendNPCMessage = () => {
  if (!newNPCMessage.value.trim() || !activeNPC.value || !userCharacter.value) return
  
  const message: ChatMessage = {
    id: `msg-${Date.now()}`,
    userId: userCharacter.value.id,
    username: userCharacter.value.name,
    message: newNPCMessage.value,
    timestamp: new Date().toISOString()
  }
  
  npcMessages.value.push(message)
  newNPCMessage.value = ''
  
  // 模拟NPC回复
  setTimeout(() => {
    if (activeNPC.value && userCharacter.value) {
      const responses = [
        '你好！很高兴见到你。',
        '今天天气真不错呢！',
        '有什么我可以帮助你的吗？',
        '这个虚拟世界很棒，不是吗？',
        '我在这里已经很久了。',
        '你看起来很有活力！'
      ]
      
      const reply: ChatMessage = {
        id: `reply-${Date.now()}`,
        userId: activeNPC.value.id,
        username: activeNPC.value.name,
        message: responses[Math.floor(Math.random() * responses.length)],
        timestamp: new Date().toISOString()
      }
      
      npcMessages.value.push(reply)
    }
  }, 1000)
}

const updateWeather = () => {
  // 随机更新天气
  const weathers: WeatherType[] = ['sunny', 'rainy', 'cloudy']
  currentWeather.value = weathers[Math.floor(Math.random() * weathers.length)]
}

const checkDayNightCycle = () => {
  const currentHour = new Date().getHours()
  isNightTime.value = currentHour >= 18 || currentHour < 6
}

const checkCurrentEvent = () => {
  // 随机事件
  const events: WorldEvent[] = [
    {
      id: 'event-1',
      name: '音乐会',
      description: '广场音乐会即将开始',
      type: 'concert',
      time: '19:00'
    },
    {
      id: 'event-2',
      name: '跳蚤市场',
      description: '周末跳蚤市场开放',
      type: 'market',
      time: '10:00'
    }
  ]
  
  currentEvent.value = Math.random() > 0.5 ? events[0] : events[1]
}

// 游戏循环
let gameLoopId: number

const gameLoop = () => {
  moveCharacter()
  gameLoopId = requestAnimationFrame(gameLoop)
}

const startGameLoop = () => {
  gameLoopId = requestAnimationFrame(gameLoop)
}

// 生命周期钩子
onMounted(() => {
  // 设置键盘事件监听
  document.addEventListener('keydown', handleKeyDown)
  document.addEventListener('keyup', handleKeyUp)
  
  // 启动游戏循环
  startGameLoop()
  
  // 初始化数据
  updateWeather()
  checkDayNightCycle()
  checkCurrentEvent()
  
  // 定时更新
  setInterval(checkDayNightCycle, 60000) // 每分钟检查一次昼夜状态
  setInterval(updateWeather, 300000) // 每5分钟更新一次天气
  setInterval(checkCurrentEvent, 600000) // 每10分钟检查一次活动
  setInterval(generateApple, 10000) // 每10秒生成一个苹果
})

onUnmounted(() => {
  document.removeEventListener('keydown', handleKeyDown)
  document.removeEventListener('keyup', handleKeyUp)
  cancelAnimationFrame(gameLoopId)
  
  if (perspective.value === 'god-view') {
    document.removeEventListener('keydown', handleGodViewControls)
  }
})

// 开始游戏
const startGame = (gameName: string) => {
  activeGame.value = gameName
  // 暂停角色移动
  isCharacterMovementEnabled.value = false
}

// 结束游戏
const endGame = () => {
  activeGame.value = null
  // 恢复角色移动
  isCharacterMovementEnabled.value = true
}

// 音乐会控制函数
const playTrack = (index: number) => {
  currentTrack.value = index
  isPlaying.value = true
}

const togglePlay = () => {
  isPlaying.value = !isPlaying.value
}

// 修复"函数未使用"的TS错误提示
void(togglePlay)

const closeConcert = () => {
  isConcertActive.value = false
  isPlaying.value = false
}

// 传送门函数
const selectDestination = (destinationId: string) => {
  currentDestination.value = destinationId
  // 模拟传送过程
  setTimeout(() => {
    isPortalActive.value = false
    currentDestination.value = ''
    
    // 显示传送成功消息
    if (userCharacter.value) {
      const destination = portalDestinations.value.find(d => d.id === destinationId)
      if (destination) {
        const message: ChatMessage = {
          id: `msg-${Date.now()}`,
          userId: 'system',
          username: '系统',
          message: `成功传送到${destination.name}！`,
          timestamp: new Date().toISOString()
        }
        npcMessages.value.push(message)
      }
    }
  }, 1500)
}

const closePortal = () => {
  isPortalActive.value = false
  currentDestination.value = ''
}

// 添加处理背景点击的函数
const handleBackgroundClick = (event: MouseEvent) => {
  // 检查点击是否直接在背景上（而不是在交互区域或其他元素上）
  if (event.target === event.currentTarget) {
    // 可以在这里添加任何需要在背景点击时执行的逻辑
    console.log('背景被点击')
  }
}

</script>

<template>
  <div class="virtual-world" :class="{ 'night-mode': isNightTime }">
    <!-- 虚拟广场 -->
    <div class="virtual-plaza">
      <div class="plaza-layout">
        <!-- 左侧控制面板 -->
        <div class="plaza-sidebar">
          <!-- 广场头部 -->
          <div class="plaza-header">
            <h2>虚拟广场</h2>
            <div class="world-info">
              <span class="weather-info">{{ currentWeather }} {{ isNightTime ? '🌙' : '☀️' }}</span>
              <span v-if="currentEvent" class="event-info">{{ currentEvent.name }}</span>
            </div>
            <button @click="toggleDayNight" class="day-night-toggle">
              {{ isNightTime ? '转向日间' : '转向夜间' }}
            </button>
          </div>
          
          <!-- 角色控制面板 -->
          <div class="character-controls">
            <button @click="togglePerspective" class="control-btn">
              <span>👁️</span>
              切换视角 (当前: {{ perspective }})
            </button>
            <button @click="toggleFollowMode" class="control-btn">
              <span>👣</span>
              切换跟随模式
            </button>
            <button @click="performAction('wave')" class="control-btn">
              <span>👋</span>
              挥手 (1)
            </button>
            <button @click="performAction('dance')" class="control-btn">
              <span>💃</span>
              跳舞 (2)
            </button>
            <button @click="performAction('sit')" class="control-btn">
              <span>🧘</span>
              坐下 (3)
            </button>
            <button @click="createPrivateRoom" class="control-btn">
              <span>🏠</span>
              创建私人房间
            </button>
          </div>
          
          <!-- 成就展示 -->
          <div class="achievements">
            <h3>我的成就</h3>
            <div class="achievement-list">
              <div 
                v-for="achievement in userAchievements.filter(a => a.unlocked)" 
                :key="achievement.id" 
                class="achievement-item"
              >
                <span class="achievement-emoji">{{ achievement.badge }}</span>
                <span class="achievement-name">{{ achievement.name }}</span>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 中央广场场景 -->
        <div class="plaza-main">
          <div class="plaza-scene-container">
            <!-- 广场地面 -->
            <div class="plaza-ground">
              <!-- 背景装饰元素 -->
              <div class="background-decoration" @click="handleBackgroundClick"></div>
              
              <!-- 天气效果 -->
              <div 
                v-if="currentWeather === 'rainy'" 
                class="weather-effect rain"
              >
                <div 
                  v-for="i in 100" 
                  :key="i"
                  class="rain-drop"
                  :style="{
                    left: `${Math.random() * 100}%`,
                    animationDelay: `${Math.random() * 2}s`,
                    animationDuration: `${0.5 + Math.random()}s`
                  }"
                ></div>
              </div>
              
              <!-- 昼夜效果 -->
              <div 
                v-if="isNightTime" 
                class="day-night-effect night"
              ></div>
              
              <!-- 交互区域 -->
              <div
                v-for="area in interactiveAreas"
                :key="area.id"
                class="interactive-area"
                :class="area.type"
                :style="{
                  left: `${area.position.x}px`,
                  top: `${area.position.y}px`,
                  width: `${area.position.width}px`,
                  height: `${area.position.height}px`
                }"
                @click="interactWithArea(area)"
              >
                <div class="area-content">
                  <span class="area-emoji">{{ area.emoji }}</span>
                  <span class="area-name">{{ area.name }}</span>
                </div>
              </div>
              
              <!-- 可交互环境元素 -->
              <div 
                v-for="obj in interactiveObjects" 
                :key="obj.id"
                class="interactive-object"
                :class="[obj.state, obj.type === 'door' ? 'shop' : '']"
                :style="{ 
                  transform: `translate(${obj.position.x}px, ${obj.position.y}px)` 
                }"
                @click="interactWithObject(obj)"
              >
                <span class="object-emoji">{{ obj.emoji }}</span>
                <span class="object-name">{{ obj.name }}</span>
                <span v-if="obj.type === 'door'" class="object-description">传送门</span>
              </div>
              
              <!-- 苹果 -->
              <div 
                v-for="apple in apples" 
                :key="apple.id"
                class="interactive-object apple"
                :class="apple.state"
                :style="{ 
                  transform: `translate(${apple.position.x}px, ${apple.position.y}px)` 
                }"
                @click="eatApple(apple)"
              >
                <span class="object-emoji">{{ apple.emoji }}</span>
                <span class="object-name">{{ apple.name }}</span>
              </div>
              
              <!-- 宠物 -->
              <div 
                v-for="pet in pets" 
                :key="pet.id"
                class="pet"
                :class="pet.state"
                :style="{ 
                  transform: `translate(${pet.position.x}px, ${pet.position.y}px)` 
                }"
                @click="interactWithPet(pet)"
              >
                <span class="pet-emoji">{{ pet.emoji }}</span>
                <span class="pet-name">{{ pet.name }}</span>
              </div>
              
              <!-- NPC -->
              <div 
                v-for="npc in npcs" 
                :key="npc.id"
                class="npc"
                :style="{ 
                  transform: `translate(${npc.position.x}px, ${npc.position.y}px)` 
                }"
                @click="interactWithNPC(npc)"
              >
                <span class="npc-emoji">{{ npc.emoji }}</span>
                <span class="npc-name">{{ npc.name }}</span>
              </div>
              
              <!-- 用户角色 -->
              <div 
                v-if="userCharacter"
                class="character user-character"
                :class="[userCharacter.state, perspective]"
                :style="{ 
                  transform: `translate(${userCharacter.position.x}px, ${userCharacter.position.y}px) rotate(${userCharacter.direction}deg)` 
                }"
              >
                <span class="character-emoji">{{ userCharacter.emoji }}</span>
                <span class="character-name">{{ userCharacter.name }}</span>
              </div>
              
              <!-- 其他角色 -->
              <div 
                v-for="character in characters.filter(c => !c.isUser)" 
                :key="character.id"
                class="character"
                :class="character.state"
                :style="{ 
                  transform: `translate(${character.position.x}px, ${character.position.y}px) rotate(${character.direction}deg)` 
                }"
              >
                <span class="character-emoji">{{ character.emoji }}</span>
                <span class="character-name">{{ character.name }}</span>
              </div>
            </div>
          </div>
          
          <!-- 活动信息 -->
          <div v-if="currentEvent" class="current-event">
            <h3>当前活动：{{ currentEvent.name }}</h3>
            <p>{{ currentEvent.description }} - {{ currentEvent.time }}</p>
          </div>
        </div>
        
        <!-- 右侧聊天区域 -->
        <div class="plaza-chat" v-if="activeNPC">
          <div class="npc-chat-panel">
            <div class="chat-header">
              <h3>与 {{ activeNPC.name }} 对话</h3>
              <button @click="activeNPC = null" class="close-button">X</button>
            </div>
            <div class="chat-messages">
              <div 
                v-for="message in npcMessages" 
                :key="message.id"
                class="chat-message"
                :class="{ 'npc-message': message.userId !== userCharacter?.id }"
              >
                <span class="message-user">{{ message.username }}:</span>
                <span class="message-content">{{ message.message }}</span>
              </div>
            </div>
            <div class="chat-input">
              <input 
                v-model="newNPCMessage"
                type="text"
                placeholder="输入消息..."
                @keyup.enter="sendNPCMessage"
              />
              <button @click="sendNPCMessage">发送</button>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 传送门界面 -->
      <div v-if="isPortalActive" class="portal-panel">
        <div class="portal-header">
          <h3>选择传送目的地</h3>
          <button @click="closePortal" class="close-button">X</button>
        </div>
        <div class="portal-content">
          <div class="portal-info">
            <p>通过传送门可以前往不同的奇妙世界，请选择你的目的地：</p>
          </div>
          <div class="destinations-grid">
            <div 
              v-for="destination in portalDestinations" 
              :key="destination.id"
              class="destination-card"
              :class="{ 'selected': currentDestination === destination.id }"
              @click="selectDestination(destination.id)"
            >
              <div class="destination-emoji">{{ destination.emoji }}</div>
              <div class="destination-name">{{ destination.name }}</div>
              <div class="destination-description">{{ destination.description }}</div>
            </div>
          </div>
          <div class="portal-suggestions">
            <h4>传送门功能建议</h4>
            <ul>
              <li>添加更多奇幻场景（如海底世界、太空站等）</li>
              <li>实现传送冷却时间机制</li>
              <li>添加传送消耗道具系统</li>
              <li>为不同场景设计独特的交互元素</li>
              <li>实现场景间的物品和状态同步</li>
              <li>添加传送特效动画</li>
            </ul>
          </div>
        </div>
      </div>
      
      <!-- 音乐会界面 -->
      <div v-if="isConcertActive" class="concert-panel">
        <div class="concert-header">
          <h3>音乐会现场</h3>
          <button @click="closeConcert" class="close-button">X</button>
        </div>
        <div class="concert-content">
          <div class="stage">
            <div class="stage-lights" :class="{ 'active': isPlaying }"></div>
            <div class="stage-performer">
              <span class="performer-emoji">🎤</span>
            </div>
          </div>
          <div class="now-playing">
            <h4>正在播放</h4>
            <p>{{ concertTracks[currentTrack].title }}</p>
            <p>{{ concertTracks[currentTrack].artist }}</p>
          </div>
          <div class="player-controls">
            <button @click="togglePlay" class="play-button">
              {{ isPlaying ? '⏸️ 暂停' : '▶️ 播放' }}
            </button>
          </div>
          <div class="track-list">
            <h4>播放列表</h4>
            <ul>
              <li 
                v-for="(track, index) in concertTracks" 
                :key="track.id"
                :class="{ 'active': index === currentTrack }"
                @click="playTrack(index)"
              >
                <span class="track-title">{{ track.title }}</span>
                <span class="track-artist">{{ track.artist }}</span>
                <span class="track-duration">{{ track.duration }}</span>
              </li>
            </ul>
          </div>
          <div class="concert-info">
            <h4>音乐会信息</h4>
            <p>欢迎来到虚拟音乐会！在这里你可以享受各种风格的音乐表演。</p>
            <p>功能建议：</p>
            <ul>
              <li>添加更多音乐曲目</li>
              <li>实现音量控制</li>
              <li>添加视觉效果与音乐同步</li>
              <li>支持用户点歌功能</li>
              <li>添加评论和互动功能</li>
              <li>实现多用户同步欣赏</li>
            </ul>
          </div>
        </div>
      </div>
      
      <!-- 游戏菜单 -->
      <div v-if="activeGame === 'menu'" class="game-menu">
        <div class="game-menu-content">
          <h3>选择小游戏</h3>
          <div class="game-options">
            <button @click="startGame('plane')" class="game-option-btn">飞机大战</button>
            <button @click="startGame('snake')" class="game-option-btn">贪吃蛇</button>
            <button @click="startGame('quiz')" class="game-option-btn">知识问答</button>
          </div>
          <button @click="activeGame = null" class="close-button">返回</button>
        </div>
      </div>
      
      <!-- 飞机大战游戏 -->
      <div v-if="activeGame === 'plane'" class="game-container">
        <PlaneWarGame @close="endGame" />
      </div>
      
      <!-- 贪吃蛇游戏 -->
      <div v-if="activeGame === 'snake'" class="game-snake-container">
        <SnakeGame @close="endGame" />
      </div>
    </div>
  </div>
</template>

<style scoped>
.virtual-world {
  display: flex;
  height: 100vh;
  overflow: hidden;
  background-color: var(--neo-brutalist-gray);
  font-family: 'Roboto Mono', monospace;
  background-size: 400% 400%;
}

.virtual-world.night-mode {
  color: white;
}

.virtual-world.night-mode .control-btn {
  color: black !important;
}

/* 虚拟广场主布局 */
.virtual-plaza {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 10px;
  position: relative;
  background: var(--neo-brutalist-white);
  border-radius: 8px;
  border: 2px solid var(--neo-brutalist-black);
  box-shadow: 5px 5px 0 0 var(--neo-brutalist-black);
  margin: 10px;
  overflow: hidden;
}

.plaza-layout {
  display: flex;
  flex: 1;
  gap: 10px;
  overflow: hidden;
}

.plaza-sidebar {
  width: 250px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  overflow-y: auto;
}

.plaza-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
  overflow: hidden;
}

.plaza-chat {
  width: 320px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 广场头部样式 */
.plaza-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--neo-brutalist-white);
  padding: 15px;
  border-radius: 8px;
  border: 2px solid var(--neo-brutalist-black);
  box-shadow: 2px 2px 0 0 var(--neo-brutalist-black);
}

.plaza-header h2 {
  margin: 0;
  color: #000;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2rem;
  letter-spacing: 1px;
}

.world-info {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.day-night-toggle {
  background: var(--neo-brutalist-yellow);
  color: var(--neo-brutalist-black);
  border: 2px solid var(--neo-brutalist-black);
  border-radius: 0;
  padding: 8px 15px;
  font-weight: bold;
  box-shadow: 2px 2px 0 0 var(--neo-brutalist-black);
  font-family: 'Bebas Neue', sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
  align-self: flex-start;
}

.day-night-toggle:hover {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 0 var(--neo-brutalist-black);
}

.weather-info, .event-info {
  background: var(--neo-brutalist-white);
  padding: 8px 15px;
  border-radius: 0;
  font-size: 0.9rem;
  font-weight: bold;
  border: 2px solid var(--neo-brutalist-black);
  box-shadow: 2px 2px 0 0 var(--neo-brutalist-black);
}

/* 角色控制面板 */
.character-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.control-btn {
  padding: 12px 16px;
  background: var(--neo-brutalist-white);
  color: var(--neo-brutalist-black);
  border: 2px solid var(--neo-brutalist-black);
  border-radius: 0;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: bold;
  box-shadow: 2px 2px 0 0 var(--neo-brutalist-black);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Bebas Neue', sans-serif;
}

.control-btn:hover {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 0 var(--neo-brutalist-black);
  background: var(--neo-brutalist-yellow);
}

.control-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 0px 0px 0 0 var(--neo-brutalist-black);
}

/* 广场场景容器 */
.plaza-scene-container {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: var(--neo-brutalist-white);
  border-radius: 8px;
  border: 2px solid var(--neo-brutalist-black);
  box-shadow: 2px 2px 0 0 var(--neo-brutalist-black);
}

/* 广场地面 - 添加蓝天白云背景 */
.plaza-ground {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(to bottom, #87CEEB, #E0F7FA);
  background-size: 400% 400%;
  animation: gradientBG 30s ease infinite;
}

@keyframes gradientBG {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 背景装饰元素 - 添加云朵效果 */
.background-decoration::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 15% 25%, rgba(255, 255, 255, 0.8) 0%, transparent 15%),
    radial-gradient(circle at 25% 15%, rgba(255, 255, 255, 0.7) 0%, transparent 15%),
    radial-gradient(circle at 10% 40%, rgba(255, 255, 255, 0.6) 0%, transparent 15%),
    radial-gradient(circle at 85% 20%, rgba(255, 255, 255, 0.8) 0%, transparent 15%),
    radial-gradient(circle at 90% 35%, rgba(255, 255, 255, 0.7) 0%, transparent 15%),
    radial-gradient(circle at 75% 10%, rgba(255, 255, 255, 0.6) 0%, transparent 15%);
  background-size: 150px 150px, 120px 120px, 100px 100px, 140px 140px, 130px 130px, 110px 110px;
  background-repeat: no-repeat;
  border-radius: 6px;
  animation: moveClouds 30s linear infinite;
  cursor: pointer;
}

@keyframes moveClouds {
  0% {
    background-position: 
      15% 25%, 25% 15%, 10% 40%,
      85% 20%, 90% 35%, 75% 10%;
  }
  100% {
    background-position: 
      115% 25%, 125% 15%, 110% 40%,
      -15% 20%, -10% 35%, -25% 10%;
  }
}

.night .plaza-ground {
  background: linear-gradient(135deg, #0f2027 0%, #20576f 50%, #2c5364 100%);
  animation: none;
}

.night .background-decoration::before {
  background-image: 
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.05) 0%, transparent 15%),
    radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.05) 0%, transparent 15%),
    repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.1) 0px, rgba(0, 0, 0, 0.1) 1px, transparent 1px, transparent 11px);
}

/* 交互区域 */
.interactive-area {
  position: absolute;
  z-index: 2;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--neo-brutalist-white);
  border: 2px dashed var(--neo-brutalist-black);
  box-shadow: 2px 2px 0 0 var(--neo-brutalist-black);
}

.interactive-area:hover {
  background: var(--neo-brutalist-yellow);
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 0 var(--neo-brutalist-black);
}

.interactive-area.event {
  background: var(--neo-brutalist-white);
}

.interactive-area.shop {
  background: var(--neo-brutalist-white);
}

.interactive-area.activity {
  background: var(--neo-brutalist-white);
}

.interactive-area.portal {
  background: var(--neo-brutalist-white);
}

.area-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
  text-align: center;
}

.area-emoji {
  font-size: 2rem;
  margin-bottom: 5px;
}

.area-name {
  font-size: 0.9rem;
  font-weight: bold;
  color: #000;
  background: var(--neo-brutalist-white);
  padding: 3px 8px;
  border-radius: 0;
  border: 2px solid var(--neo-brutalist-black);
}

/* 天气效果 */
.weather-effect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}

.rain .rain-drop {
  position: absolute;
  width: 2px;
  height: 15px;
  background: rgba(173, 216, 230, 0.8);
  animation: rainFall linear infinite;
}

@keyframes rainFall {
  from {
    transform: translateY(-100px);
  }
  to {
    transform: translateY(600px);
  }
}

/* 昼夜效果 */
.day-night-effect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
  transition: background 2s ease;
}

.night {
  background: rgba(0, 0, 0, 0.5);
}

/* 角色显示 */
.character, .user-character {
  position: absolute;
  text-align: center;
  transition: transform 0.1s linear;
  z-index: 10;
}

.character-emoji, .pet-emoji, .npc-emoji, .object-emoji {
  font-size: 2.5rem;
  display: block;
  transition: transform 0.3s ease;
}

.character-name, .pet-name, .npc-name, .object-name {
  font-size: 12px;
  color: #000;
  margin-top: 5px;
  background: var(--neo-brutalist-white);
  padding: 3px 8px;
  border-radius: 0;
  white-space: nowrap;
  font-weight: bold;
  transition: all 0.3s ease;
  opacity: 0;
  transform: translateY(10px);
  z-index: 11;
  border: 2px solid var(--neo-brutalist-black);
}

.character:hover .character-name, 
.pet:hover .pet-name, 
.npc:hover .npc-name, 
.interactive-object:hover .object-name {
  opacity: 1;
  transform: translateY(0);
}

/* 角色状态 */
.character.wave .character-emoji {
  animation: wave 0.5s ease infinite;
}

.character.dance .character-emoji {
  animation: dance 0.5s ease infinite;
}

.character.sit .character-emoji {
  transform: scale(1, 0.7);
}

@keyframes wave {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(30deg); }
}

@keyframes dance {
  0% { transform: translateY(0); }
  25% { transform: translateY(-10px) rotate(-10deg); }
  50% { transform: translateY(0) rotate(0deg); }
  75% { transform: translateY(-10px) rotate(10deg); }
  100% { transform: translateY(0); }
}

/* 宠物 */
.pet {
  position: absolute;
  text-align: center;
  cursor: pointer;
  transition: transform 0.3s ease;
  z-index: 9;
}

.pet:hover {
  transform: scale(1.2);
}

.pet.following .pet-emoji {
  animation: follow 1s ease infinite;
}

@keyframes follow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* 可交互对象 */
.interactive-object {
  position: absolute;
  text-align: center;
  cursor: pointer;
  transition: transform 0.3s ease;
  z-index: 8;
}

.interactive-object:hover {
  transform: scale(1.2);
}

.interactive-object.open .object-emoji {
  transform: rotate(90deg);
}

.interactive-object.shop {
  background: var(--neo-brutalist-white);
  border: 2px dashed var(--neo-brutalist-black);
  box-shadow: 2px 2px 0 0 var(--neo-brutalist-black);
  padding: 10px;
  border-radius: 0;
}

.interactive-object.shop:hover {
  background: var(--neo-brutalist-yellow);
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 0 var(--neo-brutalist-black);
}

.interactive-object.apple {
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

.object-description {
  font-size: 10px;
  color: #666;
  margin-top: 2px;
  background: var(--neo-brutalist-white);
  padding: 2px 5px;
  border-radius: 0;
  white-space: nowrap;
  font-weight: normal;
  transition: all 0.3s ease;
  opacity: 0;
  transform: translateY(10px);
  z-index: 11;
  border: 1px solid var(--neo-brutalist-black);
}

.interactive-object:hover .object-description {
  opacity: 1;
  transform: translateY(0);
}

/* NPC */
.npc {
  position: absolute;
  text-align: center;
  cursor: pointer;
  transition: transform 0.3s ease;
  z-index: 8;
}

.npc:hover {
  transform: scale(1.2);
}

/* 活动信息 */
.current-event {
  background: var(--neo-brutalist-white);
  padding: 15px;
  border-radius: 8px;
  border: 2px solid var(--neo-brutalist-black);
  box-shadow: 2px 2px 0 0 var(--neo-brutalist-black);
}

.current-event h3 {
  margin: 0 0 10px 0;
  color: #000;
  font-size: 1.3rem;
  font-family: 'Bebas Neue', sans-serif;
}

.current-event p {
  margin: 0;
  color: #000;
  font-weight: 500;
}

/* 成就展示 */
.achievements {
  background: var(--neo-brutalist-white);
  padding: 15px;
  border-radius: 8px;
  border: 2px solid var(--neo-brutalist-black);
  box-shadow: 2px 2px 0 0 var(--neo-brutalist-black);
}

.achievements h3 {
  margin: 0 0 10px 0;
  color: #000;
  font-size: 1.3rem;
  font-family: 'Bebas Neue', sans-serif;
}

.achievement-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.achievement-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--neo-brutalist-white);
  padding: 10px;
  border-radius: 0;
  border: 2px solid var(--neo-brutalist-black);
  box-shadow: 2px 2px 0 0 var(--neo-brutalist-black);
  transition: all 0.2s ease;
}

.achievement-item:hover {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 0 var(--neo-brutalist-black);
  background: var(--neo-brutalist-yellow);
}

.achievement-emoji {
  font-size: 1.5rem;
}

.achievement-name {
  font-weight: bold;
  color: #000;
}

/* 聊天区域 */
.npc-chat-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--neo-brutalist-white);
  border-radius: 8px;
  border: 2px solid var(--neo-brutalist-black);
  box-shadow: 2px 2px 0 0 var(--neo-brutalist-black);
  z-index: 100;
  height: 100%;
}

.chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 2px solid var(--neo-brutalist-black);
}

.chat-header h3 {
  margin: 0;
  color: #000;
  font-size: 1.2rem;
  font-family: 'Bebas Neue', sans-serif;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 15px;
  background: var(--neo-brutalist-white);
  border-radius: 0;
  border: 2px solid var(--neo-brutalist-black);
  margin: 15px;
  max-height: 300px;
}

.chat-message {
  margin-bottom: 10px;
  padding: 8px;
  background: var(--neo-brutalist-white);
  border-radius: 0;
  border: 2px solid var(--neo-brutalist-black);
}

.chat-message.npc-message {
  background: var(--neo-brutalist-yellow);
}

.message-user {
  font-weight: bold;
  color: var(--neo-brutalist-blue);
}

.message-content {
  display: block;
  margin-top: 5px;
}

.chat-input {
  display: flex;
  gap: 5px;
  padding: 0 15px 15px 15px;
}

.chat-input input {
  flex: 1;
  padding: 10px;
  border: 2px solid var(--neo-brutalist-black);
  border-radius: 0;
  outline: none;
  background: var(--neo-brutalist-white);
}

.chat-input button {
  padding: 10px 15px;
  background: var(--neo-brutalist-blue);
  color: var(--neo-brutalist-white);
  border: 2px solid var(--neo-brutalist-black);
  border-radius: 0;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.2s ease;
  font-family: 'Bebas Neue', sans-serif;
}

.chat-input button:hover {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 0 var(--neo-brutalist-black);
}

/* 传送门界面 */
.portal-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 600px;
  background: var(--neo-brutalist-white);
  border: 2px solid var(--neo-brutalist-black);
  box-shadow: 5px 5px 0 0 var(--neo-brutalist-black);
  z-index: 1000;
  border-radius: 8px;
}

.portal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 2px solid var(--neo-brutalist-black);
}

.portal-header h3 {
  margin: 0;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.5rem;
}

.portal-content {
  padding: 20px;
}

.destinations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 15px;
  margin: 20px 0;
}

.destination-card {
  background: var(--neo-brutalist-white);
  border: 2px solid var(--neo-brutalist-black);
  box-shadow: 2px 2px 0 0 var(--neo-brutalist-black);
  padding: 15px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.destination-card:hover {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 0 var(--neo-brutalist-black);
  background: var(--neo-brutalist-yellow);
}

.destination-card.selected {
  background: var(--neo-brutalist-yellow);
  border: 2px solid var(--neo-brutalist-red);
}

.destination-emoji {
  font-size: 2rem;
  display: block;
  margin-bottom: 10px;
}

.destination-name {
  font-weight: bold;
  margin-bottom: 5px;
  display: block;
}

.destination-description {
  font-size: 0.8rem;
  color: #666;
}

.portal-suggestions {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 2px dashed var(--neo-brutalist-black);
}

.portal-suggestions h4 {
  margin-top: 0;
  font-family: 'Bebas Neue', sans-serif;
}

.portal-suggestions ul {
  padding-left: 20px;
  margin: 10px 0;
}

.portal-suggestions li {
  margin-bottom: 8px;
}

.close-button {
  background: var(--neo-brutalist-red);
  color: var(--neo-brutalist-white);
  border: 2px solid var(--neo-brutalist-black);
  border-radius: 0;
  cursor: pointer;
  font-weight: bold;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.close-button:hover {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 0 var(--neo-brutalist-black);
}

/* 音乐会界面 */
.concert-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 600px;
  background: var(--neo-brutalist-white);
  border: 2px solid var(--neo-brutalist-black);
  box-shadow: 5px 5px 0 0 var(--neo-brutalist-black);
  z-index: 1000;
  border-radius: 8px;
}

.concert-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 2px solid var(--neo-brutalist-black);
}

.concert-header h3 {
  margin: 0;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.5rem;
}

.concert-content {
  padding: 20px;
}

.stage {
  height: 150px;
  background: linear-gradient(180deg, #111 0%, #333 100%);
  border: 2px solid var(--neo-brutalist-black);
  position: relative;
  margin-bottom: 20px;
  overflow: hidden;
}

.stage-lights {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255,0,0,0.3) 0%, rgba(0,0,0,0) 70%);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.stage-lights.active {
  opacity: 1;
  animation: lightPulse 1s infinite alternate;
}

@keyframes lightPulse {
  0% { opacity: 0.3; }
  100% { opacity: 0.7; }
}

.stage-performer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
}

.now-playing {
  text-align: center;
  margin-bottom: 20px;
}

.now-playing h4 {
  margin: 0 0 10px 0;
  font-family: 'Bebas Neue', sans-serif;
}

.now-playing p {
  margin: 5px 0;
  font-weight: bold;
}

.player-controls {
  text-align: center;
  margin-bottom: 20px;
}

.play-button {
  padding: 10px 20px;
  background: var(--neo-brutalist-green);
  color: var(--neo-brutalist-white);
  border: 2px solid var(--neo-brutalist-black);
  border-radius: 0;
  cursor: pointer;
  font-weight: bold;
  font-size: 1rem;
  transition: all 0.2s ease;
  font-family: 'Bebas Neue', sans-serif;
}

.play-button:hover {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 0 var(--neo-brutalist-black);
}

.track-list h4 {
  font-family: 'Bebas Neue', sans-serif;
  margin: 20px 0 10px 0;
}

.track-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.track-list li {
  padding: 10px;
  border: 2px solid var(--neo-brutalist-black);
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  justify-content: space-between;
}

.track-list li:hover {
  background: var(--neo-brutalist-yellow);
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 0 var(--neo-brutalist-black);
}

.track-list li.active {
  background: var(--neo-brutalist-green);
  color: white;
}

.track-title {
  font-weight: bold;
}

.track-artist {
  font-size: 0.9rem;
}

.track-duration {
  font-size: 0.9rem;
}

.concert-info {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 2px dashed var(--neo-brutalist-black);
}

.concert-info h4 {
  margin-top: 0;
  font-family: 'Bebas Neue', sans-serif;
}

.concert-info ul {
  padding-left: 20px;
  margin: 10px 0;
}

.concert-info li {
  margin-bottom: 8px;
}

/* 游戏菜单 */
.game-menu {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 400px;
  background: var(--neo-brutalist-white);
  border: 2px solid var(--neo-brutalist-black);
  box-shadow: 5px 5px 0 0 var(--neo-brutalist-black);
  z-index: 1000;
  border-radius: 8px;
  padding: 20px;
}

.game-menu-content {
  text-align: center;
}

.game-menu-content h3 {
  margin-top: 0;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.5rem;
}

.game-options {
  margin: 30px 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.game-option-btn {
  padding: 15px;
  background: var(--neo-brutalist-white);
  color: var(--neo-brutalist-black);
  border: 2px solid var(--neo-brutalist-black);
  border-radius: 0;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: bold;
  box-shadow: 2px 2px 0 0 var(--neo-brutalist-black);
  transition: all 0.2s ease;
  font-family: 'Bebas Neue', sans-serif;
}

.game-option-btn:hover {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 0 var(--neo-brutalist-black);
  background: var(--neo-brutalist-yellow);
}

/* 游戏容器 */
.game-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 600px;
  background: var(--neo-brutalist-white);
  border: 2px solid var(--neo-brutalist-black);
  box-shadow: 5px 5px 0 0 var(--neo-brutalist-black);
  z-index: 1000;
  border-radius: 8px;
}

.game-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 2px solid var(--neo-brutalist-black);
}

.game-header h3 {
  margin: 0;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.5rem;
}

.game-content {
  padding: 20px;
}

.game-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  font-weight: bold;
}

.game-area {
  height: 300px;
  background: #f0f0f0;
  border: 2px solid var(--neo-brutalist-black);
  display: flex;
  align-items: center;
  justify-content: center;
}

.game-placeholder {
  text-align: center;
  color: #666;
}

.game-placeholder p {
  margin: 10px 0;
}

@media (max-width: 768px) {
  .plaza-layout {
    flex-direction: column;
  }
  
  .plaza-sidebar, .plaza-chat {
    width: 100%;
  }
  
  .character-controls {
    flex-direction: row;
    flex-wrap: wrap;
  }
  
  .control-btn {
    min-width: auto;
    font-size: 0.8rem;
    padding: 8px 10px;
  }
}
</style>